<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <!--搜索-->
        <div class="box">
            <el-row :gutter="15">
                <el-col :span="6">
                    <time-pick @timeArr="timePick"></time-pick>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="searchBtn" icon="el-icon-search">检索</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="exportExcel" icon="el-icon-download">导出</el-button>
                </el-col>
            </el-row>
        </div>
        <!--表格-->
        <el-table
                :data="productList"
                :height="getWinHeight"
                style="width: 100%;"
                :cell-style="cellStyle"
                :header-cell-style = "headerStyle"
        >
            <el-table-column
                    prop="product_name"
                    label="商品"
                    >
            </el-table-column>
            <el-table-column label="销售情况">
                <el-table-column
                        label="金额"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.one.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.one.num}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单数"
                        width="80">
                    <template scope="scope">
                        <span>{{scope.row.one.order_count}}</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="实收">
                <el-table-column
                        label="金额"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.two.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.two.num}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单数"
                        width="80">
                    <template scope="scope">
                        <span>{{scope.row.two.order_count}}</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="在途">
                <el-table-column
                        label="金额"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.three.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.three.num}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单数"
                        width="80">
                    <template scope="scope">
                        <span>{{scope.row.three.order_count}}</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="退货">
                <el-table-column
                        label="金额"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.four.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="60">
                    <template scope="scope">
                        <span>{{scope.row.four.num}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单数"
                        width="80">
                    <template scope="scope">
                        <span>{{scope.row.four.order_count}}</span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <!---->
        <pagination :total="total" @currentPage="currentPage" @sizeChange="sizeChange"></pagination>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import timePick from '../../components/timePick'
    import pagination from '../../components/paginationSizeChange'
    export default {
        name: "productCensue",
        components:{
          breadcrumb,
            timePick,
            pagination
        },
        data(){
            return {
                routerList:[
                    {
                        name:'财务管理',
                        path:''
                    },
                    {
                        name:'产品统计',
                        path:''
                    }
                ],
                timeArr:[],
                page:1,
                num:this.$store.state.pageNum,
                productList:[],
                total:0
            }
        },
        created(){
            this.getCensue();
        },
        computed:{
            getWinHeight(){
                let winHeight = document.body.clientHeight;
                console.log(winHeight);
                return winHeight - 260
            }
        },
        methods:{
            timePick(val){
                // console.log(val);
                this.timeArr = val;
            },
            searchBtn(){
                this.getCensue()
            },
            async getCensue(){
                let res = await this.$Http.getProductCensue({
                    supplier_id:this.$store.state.supplier_id,
                    start_time:this.timeArr[0],
                    end_time:this.timeArr[1],
                    p:this.page,
                    num:this.num
                })
                console.log(res);
                this.productList = res.list;
                this.total = Number(res.count)
            },
            //表格样式
            cellStyle(){
                // console.log(row, column, rowIndex, columnIndex);
                return 'text-align:center'
            },
            //表头样式
            headerStyle:function(){
                return {
                    textAlign:'center'
                }
            },
            sizeChange(num){
                console.log(num);
                this.num = num;
                this.getCensue()
            },
            currentPage(page){
                this.page = page;
                this.getCensue()
            },
            exportExcel(){
                let tableHeader = ['商品名称','销售情况-金额','销售情况-数量','销售情况-订单数','实收-金额','实收-数量','实收-订单数','在途-金额','在途-数量','在途-订单数','退货-金额','退货-数量','退货-订单数'];
                let dateString = this.timeArr.length != 0?this.$util.timestampToDate(this.timeArr[0]) + '-' + this.$util.timestampToDate(this.timeArr[1]):''
                let excelName = '产品统计' + dateString;
                let data = [];
                let list = this.productList;
                for(let i in list){
                    let arr = [];
                    arr.push(list[i].product_name,list[i].one.price,list[i].one.num,list[i].one.order_count,
                        list[i].two.price,list[i].two.num,list[i].two.order_count,
                        list[i].three.price,list[i].three.num,list[i].three.order_count,
                        list[i].four.price,list[i].four.num,list[i].four.order_count)
                    data.push(arr)
                }
                // console.log(data);
                // console.log(excelName, tableHeader);
                this.$util.exportExcel01(tableHeader,excelName,data)
            }
        }
    }
</script>

<style scoped>
    .box{
        width: 100%;
        height: 60px;
        background: white;
        margin: 20px 0;
        padding: 10px 10px;
        box-sizing: border-box;
        color:#aaa;
    }
    .cell-class-style{
        text-align: center;
    }
</style>
